<template>
  <div class="demo-container">
    <h2>CrudConfirmDialog 预设配置演示</h2>
    
    <div class="demo-section">
      <h3>预设配置示例</h3>
      <div class="button-group">
        <el-button type="danger" @click="showDeleteConfirm">删除确认</el-button>
        <el-button type="primary" @click="showSaveConfirm">保存确认</el-button>
        <el-button type="warning" @click="showExitConfirm">退出确认</el-button>
        <el-button type="warning" @click="showResetConfirm">重置确认</el-button>
        <el-button type="primary" @click="showSubmitConfirm">提交确认</el-button>
        <el-button type="success" @click="showPublishConfirm">发布确认</el-button>
      </div>
    </div>

    <div class="demo-section">
      <h3>自定义配置示例</h3>
      <div class="button-group">
        <el-button type="info" @click="showCustomDialog">自定义对话框</el-button>
      </div>
    </div>

    <!-- 预设配置对话框 -->
    <CrudConfirmDialog 
      v-model:visible="deleteVisible" 
      preset="deleteConfirm"
      :target-name="'测试商标'"
      @confirm="handleConfirm('删除')"
      @cancel="handleCancel" 
    />

    <CrudConfirmDialog 
      v-model:visible="saveVisible" 
      preset="saveConfirm"
      @confirm="handleConfirm('保存')"
      @cancel="handleCancel" 
    />

    <CrudConfirmDialog 
      v-model:visible="exitVisible" 
      preset="exitConfirm"
      @confirm="handleConfirm('退出')"
      @cancel="handleCancel" 
    />

    <CrudConfirmDialog 
      v-model:visible="resetVisible" 
      preset="resetConfirm"
      @confirm="handleConfirm('重置')"
      @cancel="handleCancel" 
    />

    <CrudConfirmDialog 
      v-model:visible="submitVisible" 
      preset="submitConfirm"
      @confirm="handleConfirm('提交')"
      @cancel="handleCancel" 
    />

    <CrudConfirmDialog 
      v-model:visible="publishVisible" 
      preset="publishConfirm"
      @confirm="handleConfirm('发布')"
      @cancel="handleCancel" 
    />

    <!-- 自定义配置对话框 -->
    <CrudConfirmDialog 
      v-model:visible="customVisible" 
      title="自定义标题"
      type="info"
      content="这是一个自定义的确认对话框内容"
      confirm-text="自定义确认"
      cancel-text="自定义取消"
      warning-tip="这是自定义的警告提示"
      @confirm="handleConfirm('自定义')"
      @cancel="handleCancel" 
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import CrudConfirmDialog from './index.vue'

/**
 * 组件名称定义
 */
defineOptions({
  name: 'CrudConfirmDialogDemo'
})

// 各种对话框的显示状态
const deleteVisible = ref(false)
const saveVisible = ref(false)
const exitVisible = ref(false)
const resetVisible = ref(false)
const submitVisible = ref(false)
const publishVisible = ref(false)
const customVisible = ref(false)

/**
 * 显示删除确认对话框
 */
const showDeleteConfirm = () => {
  deleteVisible.value = true
}

/**
 * 显示保存确认对话框
 */
const showSaveConfirm = () => {
  saveVisible.value = true
}

/**
 * 显示退出确认对话框
 */
const showExitConfirm = () => {
  exitVisible.value = true
}

/**
 * 显示重置确认对话框
 */
const showResetConfirm = () => {
  resetVisible.value = true
}

/**
 * 显示提交确认对话框
 */
const showSubmitConfirm = () => {
  submitVisible.value = true
}

/**
 * 显示发布确认对话框
 */
const showPublishConfirm = () => {
  publishVisible.value = true
}

/**
 * 显示自定义对话框
 */
const showCustomDialog = () => {
  customVisible.value = true
}

/**
 * 处理确认操作
 */
const handleConfirm = (action: string) => {
  ElMessage.success(`${action}操作已确认`)
  // 关闭所有对话框
  deleteVisible.value = false
  saveVisible.value = false
  exitVisible.value = false
  resetVisible.value = false
  submitVisible.value = false
  publishVisible.value = false
  customVisible.value = false
}

/**
 * 处理取消操作
 */
const handleCancel = () => {
  ElMessage.info('操作已取消')
}
</script>

<style scoped lang="scss">
.demo-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;

  h2 {
    color: #303133;
    margin-bottom: 20px;
    text-align: center;
  }

  .demo-section {
    margin-bottom: 30px;

    h3 {
      color: #606266;
      margin-bottom: 15px;
      font-size: 16px;
    }

    .button-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;

      .el-button {
        margin: 0;
      }
    }
  }
}
</style>